<template>
  <u-overlay :show="show_multi_content_input" :z-index="39999">
    <view class="warp">
      <view class="" @click="update_show(false)">
        <u-icon name="arrow-left" size="22"></u-icon>
      </view>
      <view class="toolbar" style="height: auto; overflow-y: auto">
        <view
          :class="formats.bold ? 'ql-active' : ''"
          class="iconfont icon-zitijiacu"
          data-name="bold"
          @tap="format"
        ></view>
        <view
          :class="formats.italic ? 'ql-active' : ''"
          class="iconfont icon-zitixieti"
          data-name="italic"
          @tap="format"
        ></view>
        <view
          :class="formats.underline ? 'ql-active' : ''"
          class="iconfont icon-zitixiahuaxian"
          data-name="underline"
          @tap="format"
        ></view>
        <view
          :class="formats.strike ? 'ql-active' : ''"
          class="iconfont icon-zitishanchuxian"
          data-name="strike"
          @tap="format"
        ></view>
        <view
          :class="formats.align === 'center' ? 'ql-active' : ''"
          class="iconfont icon-juzhongduiqi"
          data-name="align"
          data-value="center"
          @tap="format"
        ></view>
        <view
          :class="formats.align === 'right' ? 'ql-active' : ''"
          class="iconfont icon-youduiqi"
          data-name="align"
          data-value="right"
          @tap="format"
        ></view>
        <view
          :class="formats.align === 'justify' ? 'ql-active' : ''"
          class="iconfont icon-zuoyouduiqi"
          data-name="align"
          data-value="justify"
          @tap="format"
        ></view>

        <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>

        <view
          :class="formats.color === '#0000ff' ? 'ql-active' : ''"
          class="iconfont icon-text_color"
          data-name="color"
          data-value="#0000ff"
          @tap="format"
        ></view>
        <view
          :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
          class="iconfont icon-fontbgcolor"
          data-name="backgroundColor"
          data-value="#00ff00"
          @tap="format"
        ></view>

        <view class="iconfont icon-date" @tap="insertDate"></view>

        <view
          class="iconfont icon--checklist"
          data-name="list"
          data-value="check"
          @tap="format"
        ></view>
        <view
          :class="formats.list === 'ordered' ? 'ql-active' : ''"
          class="iconfont icon-youxupailie"
          data-name="list"
          data-value="ordered"
          @tap="format"
        ></view>
        <view
          :class="formats.list === 'bullet' ? 'ql-active' : ''"
          class="iconfont icon-wuxupailie"
          data-name="list"
          data-value="bullet"
          @tap="format"
        ></view>

        <view class="iconfont icon-undo" @tap="undo"></view>
        <view class="iconfont icon-redo" @tap="redo"></view>

        <view
          class="iconfont icon-outdent"
          data-name="indent"
          data-value="-1"
          @tap="format"
        ></view>
        <view
          class="iconfont icon-indent"
          data-name="indent"
          data-value="+1"
          @tap="format"
        ></view>
        <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
        <view class="iconfont icon-charutupian" @tap="insertImage"></view>
        <view
          :class="formats.header === 1 ? 'ql-active' : ''"
          class="iconfont icon-format-header-1"
          data-name="header"
          :data-value="1"
          @tap="format"
        ></view>
        <view class="iconfont icon-shanchu" @tap="clear"></view>
      </view>
      <view class="content" style="margin-top: 20px">
        <editor
          id="editor"
          class="ql-container"
          :placeholder="placeholder"
          @ready="onEditorReady"
          :content="content"
        ></editor>
      </view>
      <view class="ui-mt10">
        <u-button
          customStyle="width:50%;margin-bottom:10px;"
          type="primary"
          @click="submit()"
          >确定</u-button
        >
      </view>
    </view>
    <u-modal
      :show="show_modal"
      title="是否清空编辑器全部内容"
      @cancel="show_modal = false"
      @confirm="confirm"
      confirmColor="#3c9cff"
      showConfirmButton
      :showCancelButton="true"
    ></u-modal>
  </u-overlay>
</template>

<script>
export default {
  name: '',
  props: {
		show_multi_content_input:{
			type: Boolean,
      default: false,
		},
    origin_items: {
      type: String,
      default: '',
    },
  },
  watch: {
    show_multi_content_input(newVal) {},
  },
  data() {
    return {
      show_multi_content_input: false,
      readOnly: false,
      formats: {},
      placeholder: '请输入内容...',
      editorCtx: {},
      show_modal: false,
      content: '',
    }
  },
  mounted() {},

  methods: {
    readOnlyChange() {
      this.readOnly = !this.readOnly
    },
    onEditorReady() {
      console.log('ready...')
      uni
        .createSelectorQuery()
        .select('#editor')
        .context((res) => {
          this.editorCtx = res.context
          let EContent = {
            html: this.content,
          }
          this.editorCtx.setContents(EContent)
        })
        .exec()
    },
    set_sign_up_data() {
      this.$emit('update_multi_content_show', false)
    },
    update_show(bool) {
      this.$emit('update_multi_content_show', bool)
    },
    undo() {
      this.editorCtx.undo()
    },
    redo() {
      this.editorCtx.redo()
    },
    format(e) {
      console.log(e)
      let { name, value } = e.target.dataset
      if (!name) return
      this.editorCtx.format(name, value)
    },
    onStatusChange(e) {
      const formats = e.detail
      this.formats = formats
    },
    insertDivider() {
      this.editorCtx.insertDivider({
        success: function () {
          console.log('insert divider success')
        },
      })
    },
    clear() {
      this.show_modal = true
    },
    confirm() {
      this.editorCtx.clear({
        success: (res) => {
          console.log('clear success')
        },
      })
      this.show_modal = false
    },
    removeFormat() {
      this.editorCtx.removeFormat()
    },
    insertDate() {
      const date = new Date()
      const formatDate = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`
      this.editorCtx.insertText({
        text: formatDate,
      })
    },
    insertImage() {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          let imgurl = await this.toUploadImgs(res)
          this.editorCtx.insertImage({
            src: imgurl,
            alt: '图像',
            success: function () {
              console.log('insert image success')
            },
          })
        },
      })
    },
    submit() {
      this.editorCtx.getContents({
        success: (res) => {
          let html = res.html
          if (html == '<p><br></p>') {
            html = ''
          }
          console.log(html, 'ressssssss')
          this.$emit('update_multi_content_show', false)
          this.$emit('send_rich_text', html)
        },
      })
    },
    toUploadImgs: function (fileList) {
      return new Promise((resolve, reject) => {
        //上传图片代码自行编辑
        let filePath = fileList.tempFilePaths[0]
        let data = {
          loading: true,
          thumburl: null,
          imgurl: null,
          filePath: {
            filePath: filePath,
            // #ifdef H5
            fileInfo: fileList.tempFiles[0],
            // #endif
          },
        }

        uni.$t.$uploadOSS('/leapi/upload', data.filePath, 'head/', (res) => {
          resolve(res.imgurl)
        })
      })
    },
  },
}
</script>

<style scoped>
@import './editor-icon.css';

.warp {
  width: 100%;
  height: 100%;
  background-color: white;
  /* padding: 20px; */
  box-sizing: border-box;
}

.iconfont {
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #000;
  margin-top: 20px;
}

.ql-active {
  color: #06c;
}

.content {
  height: 62%;
  overflow-y: scroll;
}

.ql-container {
  min-height: 100px;
}
</style>

